<template>
  <div class="container login">
    <!-- <van-nav-bar
      title="用户注册"
    /> -->
    <div class="login-com">
    <div>
      <van-cell-group>
        <van-field
          label="手机号"
          placeholder="请输入手机号"
          v-model="Phone"
          required
           maxlength = '11'
          autocomplete="off"
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          label="密码"
          type="password"
          required
          placeholder="请输入密码"
          v-model="Password"
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          label="确认密码"
          type="password"
          placeholder="请再次输入密码"
          required
          v-model="Password2"
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          label="用户名"
          placeholder="请输入用户名"
          v-model="UserName"
          required
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          label="出生日期"
          placeholder="请选择出生日期"
          v-model="Birthday"
          required
           @click="isShowSelectTime = true"
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label">
            <span>性别</span>
            </div>
            <div class="van-cell__value">
              <div class="van-field__body">
                 <van-radio-group v-model="Gender" style="display:flex;">
                    <van-radio name="0">男</van-radio>
                    <van-radio name="1">女</van-radio>
                  </van-radio-group>
                </div>
                </div>
              </div>
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          label="车牌号码"
          placeholder="请输入车牌号码"
          v-model="CarNumber"
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label">
            <span>上传头像</span>
            </div>
            <div class="van-cell__value">
              <div class="van-field__body">
                 <van-uploader :after-read="afterRead" v-model="files" :max-count="1" >
                  </van-uploader>
                </div>
                </div>
              </div>
      </van-cell-group>
      <div class="login-btn-row">
        <van-button type="danger" class="login-btn" @click="registered" :disabled="isdisabled">立即注册</van-button>
      </div>
    </div>
    </div>
    <van-popup v-model="isShowSelectTime" label="出生日期" position="bottom" :overlay="true">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @cancel="isShowSelectTime = false"
        @confirm="confirmBirthday"
        :min-date="minDate"
        :max-date="maxDate"
        @change="birthdayChange"
      />
    </van-popup>
  </div>
</template>

<script>
import axios from 'axios';
import baaseUrl from '../../until/base'
export default {
  name: 'registered',
  data() {
    return {
      UserName:'',
      Phone:'',
      Email:'',
      Birthday:null,
      Gender:'0',
      files:[],
      CarNumber:'',
      Password:'',
      Password2:'',
      currentDate: new Date(),
      minDate: new Date(1900,1,1),
      maxDate: new Date(),
      isShowSelectTime:false,
      changeBirthday:'',
      formData:new FormData(),
      isdisabled:false
    }
  },
  methods: {    
    registered() {  
      if(this.Phone == ''){
        this.$toast('请输入手机号')
        return false;
      }else{
        let myreg=/1\d{10}/;
          if (!myreg.test(this.Phone)) {  
              this.$toast('请输入有效的手机号');
              return false;
          }
      }
      if(this.Password == ''){
        this.$toast('请输入密码')
        return false;
      }else{
        if(this.Password.length < 6){
          this.$toast('密码长度至少为6位')
          return false;
        }
      }
      if(this.Password != this.Password2){
        this.$toast('两次输入的密码不一致')
        return false;
      }
      if(this.UserName == ''){
        this.$toast('请输入用户名')
        return false;
      } 
      this.$api.login.userRegister({        
          UserName:this.UserName,
          Phone:this.Phone,
          Email:this.Email,
          Birthday:this.Birthday,
          Gender:this.Gender,
          CarNumber:this.CarNumber,
          Password:this.Password, 
          HeadUrl:this.HeadUrl  
      }).then(res=> {
        if(res.IsSuccess){
          this.$toast.success('注册成功');
          setTimeout(()=>{
            this.$api.login.userLogin({   
                Phone: this.Phone,
                Password:this.Password,
                UserType:0 
            }).then(res=> {
              if(res.IsSuccess){
                localStorage.setItem("userPhone",this.phone);
                localStorage.setItem("authorization",res.Data);
                this.$router.push({path:'/mine'});
              }
            }) 
          },2000)
        }
      })    
    },
    confirmBirthday(){
      this.Birthday = this.changeBirthday;
      this.isShowSelectTime = false
    },
    birthdayChange(e){
      let endTimeArr = e.getValues();
      this.changeBirthday = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`
    },
    afterRead(file) {
      this.isdisabled = true;
      this.$toast('正在上传...');
      let content = file.file
      let params = new FormData(); //创建form对象
      params.append("file", content);
      let base = ''
      if (process.env.NODE_ENV == 'development') {    
          base = baaseUrl.devUrl;
      } else if (process.env.NODE_ENV == 'debug') {    
          base = '';
      } else if (process.env.NODE_ENV == 'production') {    
          base = baaseUrl.proUrl;
      }
      let url = base +'/api/common/uploadImages';
      const instance=axios.create({
          withCredentials: true,
          headers: {
            'Content-Type': 'multipart/form-data',
            'authorization': localStorage.getItem("authorization") || '',
          }
         }) 
      instance.post(url,params)
        .then(res => {
          if(res.status == 200){
            this.$toast('上传成功')
            this.HeadUrl = res.data;
            this.isdisabled = false;
          }
        }, err => {
          console.log(err)
          // Toast('上传失败，图片是否过大?')
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.login {
  background-color: #f5f5f5;
  .login-com {
    padding: .533333rem;
  }
  .user-pic-row {
    margin-top: 1.6rem;
    padding-bottom: 1.066667rem;
    text-align: center;
  }
  .user-pic {
    border-radius: 50%;
    height: 2.133333rem;
    width: 2.133333rem;
  }
  .login-btn-row {
    text-align: center;
    .login-btn {
      width: 100%;
      margin-top: .533333rem;
      border-radius: .106667rem;
    }
  }
  .red{
    color:red;
  }
  .van-radio{
    margin-right: .266667rem;
  }
}
</style>